<template>
  <div class="body-container layout-padding">
    <el-form label-width="120px" style="margin-bottom: 10px">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="客户名称">
            <el-input v-model="state.sd.kehuName" placeholder="客户名称" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="订单号">
            <el-input v-model="state.sd.orderNumber" placeholder="订单号" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button size="default" type="primary"  @click="searchOrder">
            <el-icon><ele-Search /></el-icon>查询
          </el-button>
          <el-button size="default" type="primary"  @click="addOrder">
            <el-icon><ele-CirclePlus /></el-icon>添加
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="state.orderObj.list" border style="width: 100%" :fit="true" table-layout="auto">
      <el-table-column label="CustomerName" prop="kehuName"></el-table-column>
      <el-table-column label="Vale PO No" prop="ordernumber"></el-table-column>
      <el-table-column label="Vale PO Date">
        <template v-slot="scope">
          <DateFormat :value="scope.row.orderdate" :format="'YYYY-MM-DD'"></DateFormat>
        </template>
      </el-table-column>
      <el-table-column label="Vale SAP Code" prop="valesapcode"></el-table-column>
      <el-table-column label="PO Value(US$)" prop="povalue"></el-table-column>
      <el-table-column label="Quantity(Meter)" prop="quantity"></el-table-column>
      <el-table-column label="Tech. Clarification" prop="techclarification"></el-table-column>
      <el-table-column label="Invoice No" prop="tnvoiceno"></el-table-column>
      <el-table-column label="Ref. No" prop="refno"></el-table-column>
      <el-table-column label="Completed Status(%)" prop="completedstatus"></el-table-column>
      <el-table-column label="Raw Material Preparation" prop="rmp"></el-table-column>
      <el-table-column label="Production" prop="production"></el-table-column>
      <el-table-column label="Inspection & Packing" prop="inspectionpacking"></el-table-column>
      <el-table-column label="Planned Completion Date">
        <template v-slot="scope">
          <DateFormat :value="scope.row.pcd" :format="'YYYY-MM-DD'"></DateFormat>
        </template>
      </el-table-column>
      <el-table-column label="Actual Completion Date">
        <template v-slot="scope">
          <DateFormat :value="scope.row.acd" :format="'YYYY-MM-DD'"></DateFormat>
        </template>
      </el-table-column>
      <el-table-column label="Contract Delivery Date">
        <template v-slot="scope">
          <DateFormat :value="scope.row.cdd" :format="'YYYY-MM-DD'"></DateFormat>
        </template>
      </el-table-column>
      <el-table-column label="ETD">
        <template v-slot="scope">
          <DateFormat :value="scope.row.etd" :format="'YYYY-MM-DD'"></DateFormat>
        </template>
      </el-table-column>
      <el-table-column label="ETA">
        <template v-slot="scope">
          <DateFormat :value="scope.row.eta" :format="'YYYY-MM-DD'"></DateFormat>
        </template>
      </el-table-column>
      <el-table-column label="Incoterms" prop="incoterms"></el-table-column>
      <el-table-column label="Client Country" prop="clientcountry"></el-table-column>
      <el-table-column label="Action Plan to Rectify" prop="aptr"></el-table-column>
      <el-table-column label="操作" width="128px">
        <template v-slot="scope">
          <a @click="viewOrder(scope.row.id)" style="color: #409eff;cursor: pointer">查看</a>
          &nbsp;
          <a @click="editOrder(scope.row.id)" style="color: #409eff;cursor: pointer">修改</a>
          &nbsp;
          <a @click="deleteOrder(scope.row.id)" style="color: #f56c6c;cursor: pointer">删除</a>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="mt15" background layout="total, prev, pager, next"
                   @current-change="loadOrder" @size-change="loadOrder" :total="state.orderObj.total"
                   v-model:current-page="state.sd.pageNum" v-model:page-size="state.sd.pageSize">
    </el-pagination>
    <el-dialog :title="state.popupTitle" v-model="state.entityDetailVisible" :close-on-click-modal="false" width="1266px">
      <OrderDetail v-if="state.entityDetailVisible" v-model="state.entityDetailVisible" :entityId="state.popupEntityId"></OrderDetail>
    </el-dialog>
    <el-dialog :title="state.popupTitle" v-model="state.viewDetailVisible" :close-on-click-modal="false" width="1266px">
      <OrderView v-if="state.viewDetailVisible" v-model="state.viewDetailVisible" :entityId="state.popupEntityId"></OrderView>
    </el-dialog>
  </div>
</template>

<script setup name="OrderIndex">
import request from '/@/utils/request';
import { ElMessage } from 'element-plus';
import mittBus from '/@/utils/mitt';
import {reactive, ref, onMounted, onUnmounted, defineAsyncComponent} from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

const OrderDetail = defineAsyncComponent(() => import('/@/views/order/orderDetail.vue'));
const OrderView = defineAsyncComponent(() => import('/@/views/order/orderView.vue'));
const state = reactive({
  sd: {
    pageNum: 1,
    pageSize: 10,
    kehuName:'',
    orderNumber:'',
  },
  orderObj: {},
  entityDetailVisible : false,
  viewDetailVisible : false,
  popupTitle : '',
  popupEntityId : 0,
})
const searchOrder = ()=>{
  state.sd.pageNum = 1;
  loadOrder();
}
const loadOrder = ()=>{
  request({
    url: '/order/pageordermx',
    data: state.sd
  }).then(res => {
    const { data } = res
    state.orderObj = data
  })
}
const addOrder = ()=>{
  state.popupTitle= "新增订单"
  state.entityDetailVisible= true
}
const editOrder = (id)=>{
  state.popupEntityId= id;
  state.popupTitle= "修改订单"
  state.entityDetailVisible= true
}
const viewOrder = (id)=>{
  //router.push({name: 'basedataOrderView', params :{id : id} })
  state.popupEntityId= id;
  state.popupTitle= "Order Details"
  state.viewDetailVisible= true
}
const deleteOrder = (id)=>{
  request({
    url: '/order/deleteordermx',
    data: {id : id}
  }).then(res => {
    if(res.code === '200') {
      ElMessage.success(res.msg)
      loadOrder();
    }
  })
}

onMounted(()=>{
  loadOrder();
  mittBus.on("orderadd", ()=>{
    state.sd.pageNum = 1;
    loadOrder();
  })
  mittBus.on("orderedit", ()=>{
    loadOrder();
  })
})
onUnmounted(()=>{
  mittBus.off("orderadd", ()=>{})
  mittBus.off("orderedit",()=>{})
})

</script>
<style scoped>
</style>
